<template>
  <div>
    <div class="top flexBetweenCenter">
      <div class="flexStart">
        <div class="rigntMargin">
          <a-range-picker
            v-decorator="['orderTime']"
            v-model="dayTime"
            :disabled-date="disabledDate"
            @openChange="onOpenChange"
            @calendarChange="onCalendarChange"
            @change="onChangeTimer"
            :placeholder="placeholder"
          />
        </div>
        <div class="rigntMargin">
          <!-- :default-value="defaultData" -->
          <a-select
            placeholder="请选择"
            style="width: 300px;"
            @change="handleChange"
            :allowClear="true"
          >
            <a-select-opt-group :label="item.label" v-for="(item,index) in teamGroup" :key="index">
              <a-select-option
                v-for="(data,index) in item.children "
                :key="index"
                :value="data.key"
              >{{data.label}}</a-select-option>
            </a-select-opt-group>
          </a-select>
        </div>
        <div>
          <a-button style="font-size:16px" @click="exportTable">
            <span style="display:inline-block;hight:32px"></span>导出
          </a-button>
        </div>
      </div>
      <div>
        <a-input-search
          placeholder="请输入姓名"
          v-model="fullName"
          style="width: 300px"
          @search="onSearch"
        />
      </div>
    </div>
    <!-- 表格 -->
    <div class="atable">
      <a-table :columns="columns" :data-source="data" :pagination="false">
        <span slot="fullName" slot-scope="text,record">
          <a style="color:#1890FF" @click="onDetail(record)">{{record.fullName}}</a>
        </span>
      </a-table>
    </div>
    <!-- 分页 -->
    <div class="pagination flexBetween">
      <div>共 {{total}} 条记录 第 {{current}} / {{this.configFun.pageNum(Math.ceil((total/pageSize)))}} 页</div>
      <div>
        <a-pagination
          :current="current"
          :page-size-options="pageSizeOptions"
          :total="this.configFun.pageNum(total)"
          show-size-changer
          :page-size="pageSize"
          @showSizeChange="onShowSizeChange"
          @change="pageChange"
          show-quick-jumper
        >
          <template slot="buildOptionText" slot-scope="props">
            <span>{{ props.value }}条/页</span>
            <!-- <span v-if="props.value === '40'">全部</span> -->
          </template>
        </a-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { dayAttendance } from '@/api/attendance'
import { unitTeamQuery } from '@/api/laborUnitTeam'
const columns = [
  { title: '日期', dataIndex: 'recordDate', key: 'recordDate' },
  { title: '姓名', dataIndex: 'fullName', key: 'fullName', scopedSlots: { customRender: 'fullName' } },
  { title: '岗位', dataIndex: 'postName', key: 'postName', align: 'center' },
  { title: '考勤记录（当天首次时间）', dataIndex: 'recordTime', key: 'recordTime', align: 'center' },
  { title: '考勤方式', dataIndex: 'deviceNumber', key: 'deviceNumber', align: 'center' }
]
const tabdata = [
  {
    key: '1',
    name: '2020-12-21',
    proName: '张三',
    proCode: '技术员',
    proId: '06:04:58',
    entryTime: '微信'
  },
  {
    key: '2',
    name: '2020-12-21',
    proName: '张三',
    proCode: '技术员',
    proId: '06:04:58',
    entryTime: '考勤机'
  },
  {
    key: '3',
    name: '2020-12-21',
    proName: '张三',
    proCode: '技术员',
    proId: '06:04:58',
    entryTime: '考勤机'
  },
  {
    key: '4',
    name: '2020-12-21',
    proName: '张三',
    proCode: '技术员',
    proId: '06:04:58',
    entryTime: '微信'
  },
  {
    key: '5',
    name: '2020-12-21',
    proName: '张三',
    proCode: '技术员',
    proId: '06:04:58',
    entryTime: '考勤机'
  }
]
const options = [
  {
    value: '江苏路通建筑劳务有限公司',
    label: '江苏路通建筑劳务有限公司',
    children: [
      {
        value: '下构一队',
        label: '下构一队',
        children: [
          {
            value: '钢筋班',
            label: '钢筋班'
          }
        ]
      }
    ]
  },
  {
    value: '南京仁泰基础工程有限公司',
    label: '南京仁泰基础工程有限公司',
    children: [
      {
        value: '路基施工一队',
        label: '路基施工一队',
        children: [
          {
            value: '混凝土班组',
            label: '混凝土班组'
          }
        ]
      }
    ]
  }
]
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      dayTime: [moment(new Date()).format('YYYY-MM-DD'),moment(new Date()).format('YYYY-MM-DD')],
      placeholder: ['请选择', '请选择'],
      selectPriceDate: '',
      offsetDays: 2678400 * 1000, //最多选择范围31天
      disabledCurrent: null,
      columns,
      data: [],
      pageSizeOptions: ['5', '10', '20', '30', '40'],
      current: 1,
      pageSize: 10,
      total: 1,
      defaultData: null,
      teamGroup: [
        {
          label: '劳务分包单位示例1',
          children: [
            {
              key: 'gj',
              label: '路基施工班组'
            }
          ]
        },
        {
          label: '劳务分包单位示例2',
          children: [
            {
              key: 'gj',
              label: '路基施工班组二组'
            },
            {
              key: 'mg',
              label: '木工班'
            }
          ]
        }
      ],
      options,
      fullName: '',
      teamId: '',
      flag: false,
      fromTime:'',
      toTime:''
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  created() {
    this.getTree()
  },
  mounted() {
    // this.fromTime = moment(this.dayTime[0]).format('YYYY-MM-DD')
    // this.toTime = moment(this.dayTime[1]).format('YYYY-MM-DD')
    // console.log(moment(new Date()).format('YYYY-MM-DD'));
    
    this.fromTime = this.dayTime[0]
    this.toTime =this.dayTime[1]
    // this.getDay()
  },
  methods: {
    moment,
    //搜索时获取满足的有多少页
    getTotal(val, current) {
      let size = ''
      let page = ''
      if (val) {
        size = val
      } else {
        size = this.pageSize
      }
      if (current) {
        page = current
      } else {
        page = this.current
      }
      let data = {
        endTime: this.toTime,
        likeFullName: this.fullName,
        orgId: this.userInfo.orgId,
        page: this.current,
        size: this.pageSize,
        startTime: this.fromTime,
        teamId: this.teamId,
        typeCode: '2'
      }
      dayAttendance(data).then((res) => {
        let data = res.data
        this.total = data.total
        //   console.log(Math.ceil(this.total/size));
        // console.log(page);
        if (Math.ceil(this.total / size) < page) {
          this.current = 1
        } else {
          this.current = page
        }

        this.pageSize = size
        this.getDay()
      })
    },

    getDay() {
      let data = {
        endTime: this.toTime,
        likeFullName: this.fullName,
        orgId: this.userInfo.orgId,
        page: this.current,
        size: this.pageSize,
        startTime: this.fromTime,
        teamId: this.teamId,
        typeCode: '2'
      }
      dayAttendance(data)
        .then((res) => {
          let data = res.data.data
          data.forEach((item, index) => {
            item.key = index
            if (item.deviceNumber == null) {
              item.deviceNumber = '微信'
            } else {
              item.deviceNumber = '考勤机'
            }
          })
          this.data = data
          this.total = res.data.total
        })
        .catch((res) => {
          this.spinning = false
        })
    },
    onChange(value) {
      this.current = 1
      // console.log(value)
      this.getDay()
    },
    getTree() {
      unitTeamQuery().then((res) => {
        let data = res.data.data
        data.forEach((item) => {
          item.key = item.labourOrgId
          item.label = item.labourOrgName
          item.children = []
          if (item.teamVOList.length > 0) {
            item.children = []
            item.teamVOList.forEach((res) => {
              res.key = res.id
              res.label = res.name
            })
            item.children = item.teamVOList
          }
        })
        // console.log(data);

        if (data[0].children.length > 0) {
          // console.log(data[0]);

          this.defaultData = null
          this.flag = true
          this.teamId = ''
        } else {
          this.defaultData = null
          this.teamId = ''
        }
        // console.log(data)

        this.teamGroup = data
        this.getDay()
        // console.log(this.defaultSelectedKey[0])

        // console.log( this.treeData );
      })
    },
    displayRender({ labels }) {
      return labels[labels.length - 1]
    },
    onSearch(value) {
      this.getTotal()
    },
    onDetail(text) {
      // console.log(text);

      const { href } = this.$router.resolve({
        path: `/personnelInformationLabor/${text.id}`,
        query: { id: text.id }
      })
      window.open(href, '_blank')
    },
    handleChange(value) {
      this.teamId = value
      // console.log(value)
      this.getDay()
      //   console.log(value)
    },
    onShowSizeChange(current, pageSize) {
      // console.log(current, pageSize)
      this.current = 1
      this.pageSize = pageSize
      this.getTotal(pageSize, this.current)
      // this.getTable()
    },
    pageChange(current, pageSize) {
      this.current = current
      this.pageSize = pageSize
      this.getTotal(pageSize, this.current)
    },

    /**
     * 清空禁用时间段的设置
     */
    onOpenChange(status) {
      // 清空禁用时间段的设置
      this.disabledCurrent = null
    },
    /**
     * 获取手动选择的时间段起始值
     */
    onCalendarChange(dates) {
      // console.log('From: ', dates[0], ', to: ', dates[1])
      // 获取手动选择的时间段起始值
      this.disabledCurrent = dates[0]
    },
    /**
     * 时间控制切换赋值
     */
    onChangeTimer(moment, data) {
      this.fromTime = data[0]
      this.toTime = data[1]
      // console.log(111111111111)

      this.getDay()
      // console.log(this.fromTime );
      // console.log(this.toTime);
    },
    /**
     * 1、时间限制范围 开始时间~结束时间不能超过31天
     */
    disabledDate(current) {
      if (!this.disabledCurrent) return false

      return (
        (current &&
          current <
            moment(this.disabledCurrent)
              .subtract(1, 'M')
              .startOf('day')) ||
        current >
          moment(this.disabledCurrent)
            .add(1, 'M')
            .endOf('day')
      )
    },
    exportTable() {
      let data = {
        endTime: this.toTime,
        likeFullName: this.fullName,
        // orgId: this.userInfo.orgId,
        // page: this.current,
        // size: this.pageSize,
        startTime: this.fromTime,
        typeCode: '2',
        teamId: this.teamId
      }
      window.open(
        process.env.VUE_APP_BASE_API +
          '/v1/orgPerson/clock/day/export?teamId=' +
          this.teamId +
          '&typeCode=' +
          '2' +
          '&likeFullName=' +
          this.fullName +
          '&startTime=' +
          this.fromTime +
          '&endTime=' +
          this.toTime,
        '_blank'
      )

      this.$message.success('导出成功')
    }
  }
}
</script>

<style scoped>
/* ::v-deep .ant-calendar-picker-icon {
  display: none;
}
::v-deep .ant-calendar-picker-clear {
  display: none;
} */

::v-deep .ant-calendar-picker-input.ant-input {
  width: 300px;
  /* margin-right: 20px; */
  cursor: pointer;
}
.rigntMargin {
  margin-right: 20px;
}
.restDay {
  color: #ff9933;
}
.top {
  padding-top: 30px;
  margin-bottom: 30px;
}
.atable {
  margin-bottom: 20px;
}
</style>